<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hyperf</title>
    <style>
    .room{display:none;position:relative;}
    #login{
        position:absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 400px;
        margin-left: -200px;
        margin-top: -250px;
    }
    .room-list{
        display:none;
        position:absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 400px;
        margin-left: -200px;
        margin-top: -250px;
    }
    </style>
</head>
<body>
<div>
    <div id="login">
        <div><input type="text" name="name" id="name" placeholder="请填写姓名" /></div>
        <div><button id="btn-login">登陆</button></div>
    </div>
    <div class="room">
        <div id="board" style="width:100%;height:500px;border:1px solid #ccc;overflow:scroll;"></div>
        <div class="room-list">
            @foreach($rooms as $idx=>$_room)
            <div><a href="#" data-room="{{ $_room }}" class="change">{{ $_room }}号聊天室</a></div>
            @endforeach
        </div>
        <div>
            <a href="#" id="btn-change">切换聊天室</a>
        </div>
        <textarea id="content" style="width:400px;height:300px;"></textarea>
        <button id="send">send</button>
    </div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/const.js"></script>
<script src="js/msgpack.js"></script>
<script src="js/packet.js"></script>
<script src="js/chat.js"></script>
<script>
var url = '{{ $url }}';
var chat = Chat.start(url, 'board');

$('#btn-login').click(function(){
    if ($('#name').val() == '') {
        return;
    }
    chat.login({
        name: $('#name').val(),
    });
    $('#login').hide();
    $('.room').show();
    $('#btn-change').click();
});

$('#btn-change').click(function(){
    $('.room-list').show();
});

$('#send').click(function(){
    var content = $('#content').val();
    if (content.length <= 0) return;
    chat.say(content);
    $('#content').val('');
});

$('.change').click(function(){
    chat.changeRoom($(this).data('room'));
    $('.room-list').hide();
});
</script>
</body>
</html>